<template>
  <div class="contract-list">

    <!-- 编辑弹窗 -->
    <el-dialog
      title="修改合同信息"
      :visible.sync="editDialogVisible"
      width="600px"
    >
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="合同编号">
          <el-input v-model="editForm.contractCode" />
        </el-form-item>
        <el-form-item label="年度">
          <el-input v-model="editForm.year" />
        </el-form-item>
        <el-form-item label="合同类型">
          <el-input v-model="editForm.contractType" />
        </el-form-item>
        <el-form-item label="合同名称">
          <el-input v-model="editForm.contractName" />
        </el-form-item>
        <el-form-item label="本月完成产值">
          <el-input v-model="editForm.monthOutputValue" />
        </el-form-item>
        <el-form-item label="本年完成产值">
          <el-input v-model="editForm.yearOutputValue" />
        </el-form-item>
        <el-form-item label="本年运维周期">
          <el-input v-model="editForm.yearEndPeriod" />
        </el-form-item>
        <el-form-item label="开工完成产值">
          <el-input v-model="editForm.grandTotalValue" />
        </el-form-item>
        <el-form-item label="开工运维周期">
          <el-input v-model="editForm.contractPeriod" />
        </el-form-item>
        <el-form-item label="未完成产值">
          <el-input v-model="editForm.unfinishedOutput" />
        </el-form-item>
        <el-form-item label="业务经理">
          <el-input v-model="editForm.manager" />
        </el-form-item>
        <el-form-item label="合同时间起">
          <el-date-picker
            v-model="editForm.signDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="合同时间止">
          <el-date-picker
            v-model="editForm.endDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="扣款费用">
          <el-input v-model="editForm.paymentFee" />
        </el-form-item>
        <el-form-item label="情况说明">
          <el-input v-model="editForm.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="年度:">
          <el-select v-model="searchForm.year" placeholder="全部" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="year in yearOptions"
              :key="year"
              :label="year + '年'"
              :value="year"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="合同类别:">
          <el-select v-model="searchForm.contractType" placeholder="全部" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="在线运维" value="在线运维"></el-option>
            <el-option label="在线建设" value="在线建设"></el-option>
            <el-option label="污水运维" value="污水运维"></el-option>
            <el-option label="污水建设" value="污水建设"></el-option>
            <el-option label="宝马在线" value="宝马在线"></el-option>
            <el-option label="宝马污水" value="宝马污水"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="合同名称:">
          <el-input v-model="searchForm.contractName" placeholder="请输入合同名称" clearable></el-input>
        </el-form-item>

        <el-form-item label="合同编号:">
          <el-input v-model="searchForm.contractCode" placeholder="请输入合同编号" clearable></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表区域 -->
    <div class="table-section">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
        size="mini"
        :header-cell-style="{background:'#f5f7fa',color:'#606266',fontSize:'14px',fontWeight:'600',textAlign:'center'}"
        :cell-style="{fontSize:'12px',padding:'6px 0',textAlign:'center'}"
        height="700"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="contractCode" label="合同编号" min-width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="handleContractClick(scope.row)">
              {{ scope.row.contractCode }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="year" label="年度" width="100"></el-table-column>
        <el-table-column prop="contractType" label="合同类型" width="120"></el-table-column>
        <el-table-column prop="contractName" label="合同名称" min-width="150"></el-table-column>
        <el-table-column prop="effectiveAmount" label="合同金额" min-width="150"></el-table-column>
        <el-table-column prop="monthOutputValue" label="本月完成产值" width="120"></el-table-column>
        <el-table-column prop="yearOutputValue" label="本年完成产值" width="120"></el-table-column>
        <el-table-column prop="yearEndPeriod" label="本年运维周期" width="100"></el-table-column>
        <el-table-column prop="grandTotalValue" label="开工完成产值" width="120"></el-table-column>
        <el-table-column prop="startWorkContractPeriod" label="开工运维周期" width="120"></el-table-column>
        <el-table-column prop="unfinishedOutput" label="未完成产值" width="120"></el-table-column>
        <el-table-column prop="manager" label="业务经理" width="100"></el-table-column>
        <el-table-column prop="startDate" label="开始时间" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.startDate, 'YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column prop="endDate" label="到期时间" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.endDate, 'YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentFee" label="扣款费用" width="100"></el-table-column>
        <el-table-column prop="remark" label="情况说明" min-width="150"></el-table-column>
        <!-- <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>   
            <el-button type="text" @click="handleDelete(scope.row)" style="color: red">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 合同详情弹窗 -->
      <el-dialog
        :visible.sync="contractDetailVisible"
        title="合同详情"
        width="85%"
        :close-on-click-modal="false"
        custom-class="contract-detail-dialog"
        @close="contractDetailVisible = false"
      >
        <div class="contract-detail-container">
          <!-- 基本信息区域 -->
          <div class="info-section">
            <div class="section-header">
              <i class="el-icon-document"></i>
              <span>基本信息</span>
            </div>
            <el-descriptions :column="2" border class="contract-descriptions">
              <el-descriptions-item label="合同编号">
                <span class="contract-value">{{ currentContract.contractCode || '暂无' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="合同名称">
                <span class="contract-value">{{ currentContract.contractName || '暂无' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="合同类型">
                <span class="contract-value contract-type">{{ currentContract.contractType || '暂无' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="有效金额">
                <span class="contract-value contract-amount">{{ currentContract.effectiveAmount ? currentContract.effectiveAmount + ' 元' : '暂无' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="客户名称">
                <span class="contract-value">{{ currentContract.clientName || '暂无' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="负责人">
                <span class="contract-value">{{ currentContract.manager || '暂无' }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 时间信息区域 -->
          <div class="info-section">
            <div class="section-header">
              <i class="el-icon-time"></i>
              <span>时间信息</span>
            </div>
            <el-descriptions :column="2" border class="contract-descriptions">
              <el-descriptions-item label="签订日期">
                <span class="contract-value contract-date">{{ formatDate(currentContract.signDate) || '暂无' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="生效日期">
                <span class="contract-value contract-date">{{ formatDate(currentContract.startDate) || '暂无' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="结束日期">
                <span class="contract-value contract-date">{{ formatDate(currentContract.endDate) || '暂无' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">
                <span class="contract-value contract-date">{{ formatDate(currentContract.createTime) || '暂无' }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-dialog>



      <!-- 分页 -->
      <div class="pagination-section">
        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="formData.pageNum"
          :limit.sync="formData.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { add, list, update, Clientlist,delContract } from "@/api/monitor/contract";
export default {

  data() {
    return {
      contractDetailVisible: false, // 合同详情弹窗可见性
      currentContract: {} ,// 当前选中的合同数据
      editDialogVisible: false, // 编辑弹窗是否显示
      editForm: {}, // 编辑表单数据

      formData: {
        pageNum: 1,
        pageSize: 15,
        year: "",
        contractType: "",
        contractName: "",
        contractCode: "",
      },
      // 搜索表单
      searchForm: {
        year: '',
        contractType: '',
        contractName: '',
        contractCode: ''
      },

      // 年份选项
      yearOptions: (() => {
        const currentYear = new Date().getFullYear()
        return Array.from({length: 5}, (_, i) => currentYear - i)
      })(),

      // 表格数据
      tableData: [],
      total: 0,
      selectedRow: null,

      // 选中的行
      selectedRows: []
    }
  },

  methods: {
     // 点击修改按钮
    handleEdit(row) {
      this.editForm = { ...row }; // 深拷贝选中行的数据到编辑表单
      this.editDialogVisible = true; // 打开弹窗
    },
    // 保存编辑
    saveEdit() {
      // 可以在这里调用接口保存数据
      const index = this.tableData.findIndex(
        (item) => item.contractCode === this.editForm.contractCode
      );
      if (index !== -1) {
        this.tableData.splice(index, 1, { ...this.editForm }); // 更新表格中的数据
      }
      this.editDialogVisible = false; // 关闭弹窗
      this.$message.success("保存成功！");
    },

    // 删除操作
    handleDelete(row) {
      this.$confirm("确认删除该合同吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData = this.tableData.filter(
            (item) => item.contractCode !== row.contractCode
          );
          this.$message.success("删除成功！");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    // 格式化日期
    formatDate(date, format = 'YYYY-MM-DD') {
      if (!date) return ''
      return moment(date).format(format)
    },
    // 搜索
    handleSearch() {
      this.formData.pageNum = 1;
      this.formData.year = this.searchForm.year;
      this.formData.contractType = this.searchForm.contractType;
      this.formData.contractName = this.searchForm.contractName;
      this.formData.contractCode = this.searchForm.contractCode;
      this.formData.clientName = this.searchForm.clientName;
      
      this.getList();
    },


    // 获取列表数据
    getList() {
      this.loading = true;
      list(this.formData).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 选择行
    handleSelectionChange(val) {
      this.selectedRows = val
    },

    // 点击合同编号
    handleContractClick(row) {
      this.currentContract = row;
      this.contractDetailVisible = true;
    },
    // 格式化时间（可选，根据项目已有工具调整）
    formatDate(dateStr) {
      return new Date(dateStr).toLocaleString();
    },



    // 分页相关方法
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.pageInfo.currentPage = val
      this.getList()
    }
  },

  created() {
    this.getList()
  }
}
</script>

<style scoped>
.contract-detail-dialog {
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .contract-detail-dialog .el-dialog__header {
          padding: 16px 24px;
          border-bottom: 1px solid #f0f2f5;
        }
        .contract-detail-dialog .el-dialog__title {
          font-size: 16px;
          color: #181818;
        }

.table-section {
  padding: 20px;
}
.pagination-section {
  margin-top: 20px;
  text-align: right;
}
.contract-list {
  padding: 20px;
}

.search-section {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  height: 85px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-form .el-form-item {
  margin-bottom: 10px;
  margin-right: 10px;
}

.table-section {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.pagination-section {
  margin-top: 20px;
  text-align: right;
}

/* 表格内链接样式 */
.el-table .cell button.el-button--text {
  padding: 0;
  color: #409EFF;
}

.el-table .cell button.el-button--text:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 自定义表格样式 */
.el-table th {
  background-color: #f5f7fa;
  color: #606266;
}

.el-table td {
  padding: 8px 0;
}

/* 自定义表单项样式 */
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 240px;
}

.el-select {
  width: 120px;
}

/* 操作按钮样式 */
.operation-button {
  margin: 0 5px;
}

.delete-button {
  color: #F56C6C;
}

.delete-button:hover {
  color: #f78989;
}

/* 合同详情弹窗样式 */
.contract-detail-dialog .el-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.contract-detail-dialog .el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
}

.contract-detail-dialog .el-dialog__title {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.contract-detail-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 20px;
}

.contract-detail-dialog .el-dialog__headerbtn .el-dialog__close:hover {
  color: #f0f0f0;
}

.contract-detail-dialog .el-dialog__body {
  padding: 24px;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
}

.contract-detail-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.info-section:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-header i {
  font-size: 18px;
  margin-right: 8px;
  color: #667eea;
  -webkit-text-fill-color: #667eea;
}

.section-header span {
  font-size: 16px;
  font-weight: 600;
}

.contract-descriptions {
  border-radius: 8px;
  overflow: hidden;
}

.contract-descriptions .el-descriptions__header {
  background: #f8fafc;
}

.contract-descriptions .el-descriptions__label {
  background: #f1f5f9;
  color: #475569;
  font-weight: 500;
  width: 120px;
}

.contract-descriptions .el-descriptions__content {
  background: white;
  padding: 12px 16px;
}

.contract-value {
  color: #334155;
  font-size: 14px;
  font-weight: 500;
}

.contract-type {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  display: inline-block;
}

.contract-amount {
  color: #059669;
  font-weight: 600;
  font-size: 15px;
}

.contract-date {
  color: #7c3aed;
  font-family: 'Courier New', monospace;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .contract-detail-dialog .el-dialog {
    width: 95% !important;
    margin: 5vh auto;
  }
  
  .contract-descriptions {
    font-size: 12px;
  }
  
  .contract-descriptions .el-descriptions__label {
    width: 100px;
  }
}
</style>
